@import '../../../shared/src/ui/generic/PopoverButton.css';
@import '../../../shared/src/ui/generic/Toggle.css';
@import '../../../shared/src/app/CommandList';
@import '../../../shared/src/app/ExtensionStatus';
@import '../../../shared/src/app/notifications/Notifications';
@import '../../../shared/src/app/notifications/NotificationItem';

$body-color-light: #2b3750;
$body-color-dark: #f2f4f8;

.theme-light {
    --body-color: #{$body-color-light};
    --body-bg: white;
    --text-muted: #{$color-light-text-2};
    --link-color: #566e9f;
    --link-hover-color: #1d2535;
    --extension-card-bg: #{lighten($color-light-bg-2, 2.5%)};
}
.theme-dark {
    --body-color: #{$body-color-dark};
    --body-bg: #151c28;
    --text-muted: #{$color-text-1};
    --link-color: #a2b0cd;
    --link-hover-color: white;
    --extension-card-bg: #{$color-bg-2};
}

.command-palette-button {
    align-self: center;
}

.command-list {
    @import 'bootstrap/scss/list-group';
    @import 'bootstrap/scss/forms';
    @import 'bootstrap/scss/input-group';

    a {
        cursor: pointer;
    }
}

.sourcegraph-extensions-global {
    position: fixed;
    bottom: 0;
    right: 0;
}

.global-debug {
    position: fixed;
    right: 0;
    bottom: 0;
    background-color: var(--body-bg);
}

.configured-extensions-list {
    h1 {
        font-size: 32px;
        line-height: 40px;
        font-weight: 600;
        margin: 0 0 1rem;
    }
    h2 {
        font-size: 24px;
        line-height: 32px;
        font-weight: 600;
    }
    h3 {
        font-size: 16px;
        line-height: 24px;
        font-weight: 600;
    }
    h4 {
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;
    }
    h5 {
        font-size: 12px;
        letter-spacing: 1px;
        font-weight: 500;
        text-transform: uppercase;
        margin: 0;
    }
}

:root {
    --primary-opacity-2: #{transparentize($primary, 0.8)};
    --dropdown-bg: #{$color-light-bg-1};
    --extension-card-bg: #{lighten($color-light-bg-2, 2.5%)};
    --dropdown-border-color: #{$color-light-border};
}
.popover {
    max-width: unset !important;
}
.nav-link {
    box-shadow: none !important;
    color: var(--body-color);
    display: flex;
    align-items: center;
    padding: 0.3rem 0.5rem;
    .icon-inline {
        margin-right: 4px;
    }
}
.toggle--off::-webkit-slider-runnable-track {
    color: #eee;
}
.toggle--off::-webkit-slider-thumb {
    background-color: black;
    opacity: 0.2;
}
// Formats an icon so that it appears inline in the text
// with height matching the text
.icon-inline {
    // SVGs already include padding to account for text baseline,
    // so align with the bottom of the text
    vertical-align: bottom;
    display: inline-flex;
    align-items: center;
}
.nav img.icon-inline {
    // TODO find a better way to scale icons that is not proportional to the font size
    // 14px font size -> 20px icon size
    // stylelint-disable-next-line declaration-property-unit-whitelist
    width: (20em / 14);
    // stylelint-disable-next-line declaration-property-unit-whitelist
    height: (20em / 14);
    // Match color of the text
    fill: currentColor;
}

.configured-extensions-list {
    .btn.btn-sm {
        font-size: 12px;
    }
    .extension-card {
        .dropdown {
            button {
                margin: 0.25rem 0;
            }
        }
    }
}

.line-decoration-attachment {
    margin-left: 0.25rem;
}
